.bg-2 {
  background: #fff
    url(https://static.haibian.com/sealion/0.0.1/index/3.0.0/img/bg-2@2x.png?t=1512056038)
    center top no-repeat;
  background-size: auto 810px;
  height: 810px;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}
.main-section {
  width: 1440px;
  margin: 0 auto;
  .section-1 {
    height: 790px;
    background: transparent;
    width: 1200px;
    margin: 0 auto;
    position: relative;
    padding-top: 30px;
    .section-1-img {
      float: left;
    }
    @media screen and (max-width: 1439px) and (min-width: 1201px) {
      .section-1-img {
        width: 352px;
      }
    }
    @media screen and (max-width: 1200px) {
      .section-1-img {
        width: 352px;
      }
    }
    .login-box {
      position: absolute;
      right: 30px;
      top: 110px;
    }
  }
  @media screen and (max-width: 1200px) {
    .section-1 {
      width: 1000px;
    }
  }
  .section-2 {
    li {
      float: left;
      width: 360px;
      .img-box {
        height: 280px;
        img {
          width: 90%;
          background: none;
          display: block;
          margin: 0 auto;
        }
      }
      .footer {
        text-align: center;
        p {
          font-size: 18px;
          color: #7e7e7e;
        }
        .title {
          color: #384457;
          font-size: 29px;
          font-weight: 600;
        }
        @media screen and (max-width: 1439px) and (min-width: 1201px) {
          p {
            font-size: 16px;
          }
          .title {
            font-size: 24px;
          }
        }
        @media screen and (max-width: 1200px) {
          p {
            font-size: 13px;
          }
          .title {
            font-size: 20px;
          }
        }
      }
    }
    @media screen and (max-width: 1439px) and (min-width: 1201px) {
      li {
        width: 300px;
      }
    }
    @media screen and (max-width: 1200px) {
      li {
        width: 250px;
      }
    }
  }
  .section-3 {
    li {
      position: relative;
      color: #333333;
      &.model-1 {
        .big-img {
          float: left;
        }
        .info {
          text-align: right;
          left: 40%;
        }
      }
      &.model-2 {
        .big-img {
          float: right;
        }
        .info {
          text-align: left;
          right: 40%;
        }
      }
      .big-img {
        width: 50%;
      }
      .info {
        position: absolute;
        top: 30%;
        width: 55%;
      }
      .text {
        font-size: 40px;
        font-weight: 500;
        display: inline-block;
        position: relative;
        z-index: 1;
        .buttom-line {
          background: #ffd166;
          width: 156px;
          height: 20px;
          margin-top: -20px;
          position: absolute;
          right: 0;
          z-index: -1;
        }
      }
      h3 {
        font-size: 28px;
        line-height: 65px;
        margin-top: 20px;
        margin-bottom: 10px;
      }
      p {
        font-size: 18px;
        color: #7e7e7e;
        line-height: 24px;
      }
      @media screen and (max-width: 1439px) and (min-width: 1201px) {
        .text {
          font-size: 32px;
        }
        h3 {
          font-size: 24px;
          line-height: 54px;
        }
        p {
          font-size: 16px;
        }
      }
      @media screen and (max-width: 1200px) {
        .text {
          font-size: 27px;
        }
        h3 {
          font-size: 20px;
          line-height: 45px;
        }
        p {
          font-size: 13px;
        }
      }
    }
  }
}
@media screen and (max-width: 1439px) and (min-width: 1201px) {
  .main-section {
    width: 1200px;
  }
}
@media screen and (max-width: 1200px) {
  .main-section {
    width: 1000px;
  }
}
